<template>
  <div id="bk" class="wrapper" :style="{ backgroundImage: `url(${bgmLarge})` }">
    <div class="login-box">
      <div class="title">
        <img
          :src="loginUrl"
          style="
            width: 30px;
            height: 30px;
            margin: 0 5px -5px 0;
            -webkit-user-drag: none;
            -khtml-user-drag: none;
            -moz-user-drag: none;
            user-drag: none;
          "
        />
        <b style="font-size: 28px">{{ loginText }}</b>
      </div>
      <div style="margin-top: 30px">
        <el-form label-width="70px">
          <el-form-item label="用户名">
            <el-input
              v-model.trim="user.username"
              aria-required="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="密码" style="margin-top: 25px">
            <el-input
              v-model.trim="user.password"
              show-password
              aria-required="true"
            ></el-input>
          </el-form-item>
          <el-form-item style="text-align: center">
            <el-button type="success" @click="onSubmit" style="font-size: 22px"
              >登录</el-button
            >
            <el-button
              @click="$router.push('/register')"
              style="font-size: 22px"
              >注册</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import md5 from "js-md5";

const store = useStore();
const route = useRoute();
const router = useRouter();

// Reactive data
const to = ref<string>(route.query.to ? route.query.to.toString() : "/");
const user = ref<any>({
  username: "",
  password: "",
});
const loginUrl = ref<string>(store.state.pagesConfig.loginConfig.bgm_url);
const loginText = ref<string>(store.state.pagesConfig.loginConfig.loginText);
const bgmLarge = ref<string>(store.state.pagesConfig.loginConfig.bgm_large);

// Methods
const onSubmit = () => {
  if (user.value.username === "" || user.value.password === "") {
    store.state.message.error("账号或密码不能为空");
    return false;
  }

  const form = {
    ...user.value,
    password: md5(user.value.password),
  };

  store.state.request
    .post("/login", form)
    .then((res: any) => {
      if (res.code === "200") {
        store.state.message.success({
          message: "登陆成功",
          showClose: true,
        });
        console.log("数据据诶够", to.value);

        router.push(to.value);
        localStorage.setItem("user", JSON.stringify(res.data));
      } else {
        store.state.message.error(res.msg);
      }
    })
    .catch((e: any) => {
      store.state.message.error(e.response?.data || e);
    });
};
</script>

<style scoped>
.wrapper {
  height: 100vh;
  background-color: rgb(161, 202, 220);
  overflow: auto;
}
.login-box {
  margin: 220px auto;
  padding: 40px;
  width: 450px;
  height: 280px;
  background-color: #ffffff;
  border-radius: 10px;
}
.title {
  text-align: center;
  margin: 30px auto;
  font-size: 25px;
}

#bk {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow-y: auto;
  height: 100%;
  background: center top / cover no-repeat;
}
</style>
